<template>
  <!-- 分页组件 -->
  <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 16]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props:["total"],
  methods: {
    handleSizeChange(val) {
      // 发送自定义事件，通知父组件分页大小变化
      this.$emit("size-change", val);
    },
    handleCurrentChange(val) {
      // 发送自定义事件，通知父组件当前页变化
      this.$emit("current-change", val);
    },
  },
  data() {
    return {
      currentPage: 1,
    };
  },
};
</script>

<style scoped>
.pagination {
  margin-top: 30px;
}
</style>
